<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="3">
        <div style="padding-top:15px;">
          <el-button type="primary" icon="el-icon-folder-add" @click="add()">新增</el-button>
        </div>
      </el-col>
      <el-col :span="1.5" style="padding-top:23px;">
        <span>名称：</span>
      </el-col>
      <el-col :span="4" style="padding-top:15px;">
        <!-- <el-input v-model="ininput" placeholder="请输入餐桌号"></el-input> -->
        <el-input v-model="consumable" placeholder="请输入名称"></el-input>
      </el-col>
      <el-col :span="1.5" style="padding-top:23px;">
        <span>分类：</span>
      </el-col>
      <el-col :span="4" style="padding-top:15px;">
        <template>
          <div>
            <diySelect
              :optionData="typeoptionData"
              @choose="typechoose"
              :propsValue="typeselectValue"
              size="medium"
            ></diySelect>
            <!--    设置选项数据  下面有数据格式  绑定取值方法      设置尺寸 表格外用medium(默认)，表格内用small -->
          </div>
        </template>
      </el-col>
      <el-col :span="1.5" style="padding-top:23px;">
        <span>状态：</span>
      </el-col>
      <el-col :span="4" style="padding-top:15px;">
        <template>
          <div>
            <diySelect
              :optionData="stateoptionData"
              @choose="statechoose"
              :propsValue="stateselectValue"
              size="medium"
            ></diySelect>
            <!--    设置选项数据  下面有数据格式  绑定取值方法      设置尺寸 表格外用medium(默认)，表格内用small -->
          </div>
        </template>
      </el-col>
      <el-col :span="2">
        <div style="padding-top:15px;">
          <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
        </div>
      </el-col>
    </el-row>
    <div v-show="pagingtableshow" style="padding-top:20px">
      <el-table
              :data="currentData"
              border
              :header-cell-style="this.$store.state.headerCssObj"
              :cell-style="this.$store.state.cellCssObj"
      >
        <el-table-column prop="goods" label="商品名"></el-table-column>
        <el-table-column prop="goodsClassifyName" label="商品类型"></el-table-column>
        <el-table-column prop="goodsUnitsName" label="单位"></el-table-column>
        <el-table-column prop="stock" label="库存"></el-table-column>
        <el-table-column prop="supplierName" label="供应商"></el-table-column>
        <!-- <el-table-column prop="creator" label="创建人"></el-table-column> -->
        <!-- <el-table-column prop="creationTime" label="创建时间"></el-table-column> -->
        <!-- <el-table-column prop="updateOne" label="更新人"></el-table-column> -->
        <!-- <el-table-column prop="updateTime" label="更新时间"></el-table-column> -->
        <el-table-column prop="delFlag.label" label="状态"></el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            <el-button size="mini" type="info" @click="handleAdd(scope.row)">补货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center; padding-top:20px">
        <paging :obj="pagingData"></paging>
      </div>
    </div>
    <div v-show="searchtableshow" style="padding-top:20px">
      <el-table
        :data="currentData1"
        border
        :header-cell-style="this.$store.state.headerCssObj"
        :cell-style="this.$store.state.cellCssObj"
      >
        <el-table-column prop="goods" label="商品名"></el-table-column>
        <el-table-column prop="goodsClassifyName" label="商品类型"></el-table-column>
        <el-table-column prop="goodsUnitsName" label="单位"></el-table-column>
        <el-table-column prop="stock" label="库存"></el-table-column>
        <el-table-column prop="supplierName" label="供应商"></el-table-column>
        <!-- <el-table-column prop="creator" label="创建人"></el-table-column> -->
        <!-- <el-table-column prop="creationTime" label="创建时间"></el-table-column> -->
        <!-- <el-table-column prop="updateOne" label="更新人"></el-table-column> -->
        <!-- <el-table-column prop="updateTime" label="更新时间"></el-table-column> -->
        <el-table-column prop="delFlag.label" label="状态"></el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            <el-button size="mini" type="info" @click="handleAdd(scope.row)">补货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center; padding-top:20px">
        <paging :obj="pagingDataSearch"></paging>
      </div>
    </div>
    <el-dialog title="新增库存消耗品" :visible.sync="dialogVisible" width="30%" center>
      <div style="padding:10px;text-align:center;">
        <span style>商品名：</span>
        <el-input v-model="addname" style="width:200px;"></el-input>
      </div>
      <div style="padding:10px;text-align:center;">
        <span style>商品类型：</span>
        <el-input v-model="addtype" style="width:200px;"></el-input>
      </div>
      <div style="padding:10px;text-align:center;">
        <span style>库存：</span>
        <el-input v-model="addnum" style="width:200px;"></el-input>
      </div>
      <div style="padding:10px;text-align:center;">
        <span>单位：</span>
        <diySelect

          :optionData="unitoptionData"
          @choose="unitchoose"
          :propsValue="unitselectValue"
          size="medium"

        ></diySelect>
      </div>
      <div style="padding:10px;text-align:center;">
        <span>供应商：</span>
        <diySelect
          :optionData="supplyoptionData"
          @choose="supplychoose"
          :propsValue="supplyselectValue"
          size="medium"

        ></diySelect>
      </div>
      <div style="padding:10px;text-align:center;">
        <el-button type="primary" @click="addEnsure()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改消耗品" :visible.sync="dialogVisibleChange" width="30%" center>
      <div style="padding:10px;text-align:center;">
        <span style>商品名：</span>
        <el-input :disabled="true" style="width:200px;"></el-input>
      </div>
      <div style="padding:10px;text-align:center;">
        <span style>商品类型：</span>
        <el-input :disabled="true" style="width:200px;"></el-input>
      </div>
      <div style="padding:10px;text-align:center;">
        <span style>库存：</span>
        <el-input v-model="changenum" style="width:200px;"></el-input>
      </div>
      <div style="padding:10px;text-align:center;">
        <span>单位：</span>
        <diySelect

          :optionData="unitoptionData"
          @choose="unitchoose"
          :propsValue="unitselectValue"
          size="medium"

        ></diySelect>
      </div>
      <div style="padding:10px;text-align:center;">
        <span>供应商：</span>
        <diySelect
          :optionData="supplyoptionData"
          @choose="supplychoose"
          :propsValue="supplyselectValue"
          size="medium"

        ></diySelect>
      </div>
      <div style="padding:10px;text-align:center;">
        <el-button type="primary" @click="addEnsureChange()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="消耗品补货" :visible.sync="dialogVisibleAdd" width="30%" center>
      <!-- <div style="padding:10px;text-align:center;">
        <span style>商品名：</span>
        <el-input v-model="supplyname" style="width:200px;"></el-input>
      </div>
      <div style="padding:10px;text-align:center;">
        <span style>商品类型：</span>
        <el-input v-model="supplytype" style="width:200px;"></el-input>
      </div>-->
      <div style="padding:10px;text-align:center;">
        <span style>库存：</span>
        <el-input v-model="supplynum" style="width:200px;"></el-input>
      </div>
      <!-- <div style="padding:10px;text-align:center;">
        <span>单位：</span>
        <diySelect :optionData="unitoptionData" @choose="unitchoose" :propsValue=unitselectValue size="medium"></diySelect>
      </div>
      <div style="padding:10px;text-align:center;">
        <span>供应商：</span>
        <diySelect :optionData="supplyoptionData" @choose="supplychoose" :propsValue=supplyselectValue size="medium"></diySelect>
      </div>-->
      <div style="padding:10px;text-align:center;">
        <el-button type="primary" @click="addEnsureAdd()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="确认删除" :visible.sync="dialogVisibleDelete" width="30%" center>
      <div style="padding:10px;text-align:center; float:left;padding-left:130px;">
        <el-button type="primary" @click="addEnsureDelete()">确定</el-button>
      </div>
      <div style="padding:10px;text-align:center; ">
        <el-button type="primary" @click="addCancelDelete()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { mapActions, mapState ,mapGetters} from "vuex";
export default {
  name: "consumablesManagementPage",
  data() {
    return {
      ManagementID:'',
      // managementpageData:[],
      consumable: "",
      typeselectValue: "",
      stateselectValue: "",
      supplyselectValue: "",
      unitselectValue: "",
      addname: "",
      addtype: "",
      addnum: "",
      changenum: "",
      supplyname: "",
      supplytype: "",
      supplynum: "",
      pagingtableshow:true,
      searchtableshow:false,
      dialogVisible: false,
      dialogVisibleChange: false,
      dialogVisibleAdd: false,
      dialogVisibleDelete: false,
      num: 1, 
      // addShow: false,
      // 下拉框
      typeoptionData: [
        {
          //数据格式
          value: 1,
          label: "肉"
        },
        { value: 2, label: "蔬菜" },
        { value: 3, label: "水果" }
      ],
      stateoptionData: [
        {
          //数据格式
          value: 1,
          label: "正常"
        },
        { value: 2, label: "删除" }
        // { value: 3, label: "删除" }
      ],
      supplyoptionData: [
        {
          //数据格式
          value: 1,
          label: "中粮"
        },
        { value: 2, label: "菊乐" },
        { value: 3, label: "蒙牛" }
      ],
      unitoptionData: [
        {
          //数据格式
          value: 1,
          label: "千克"
        },
        { value: 2, label: "克" },
        { value: 3, label: "瓶" },
        { value: 4, label: "个" }
      ]
    };
    // console.log(value)
  },
  mounted() {
    let obj = {
      currentPage: 1,
      pageSize: 5
    };
    this.postPagingData(obj);
    // this.managementpageData=this.getstorePagingData 
    console.log(this.managementpageData) 
  },
  methods: {
    ...mapActions('consumablesManagementStore',[
      "postAddData",
      "postSearchData",
      "postDeleteData",
      "postChangeData",
      "postSupplyData",
      "postPagingData"
    ]),
    search() {
      // this.consumable = "";
      this.pagingtableshow=false
      this.searchtableshow=true
      if (this.consumable === "") {
        alert("请输入名称");
      } else {
        let obj = {
          currentPage: 1,
          pageSize: 5,
          goods: this.consumable,
          goodsClassifyName: "肉",
          delFlag: 0
        };
        this.postSearchData(obj);
        
        // this.managementpageData=this.getstoreSearchData
        
      }
    },
    typechoose(typeval) {
      this.typeselectValue = typeval; //获取选项值
      console.log(typeval);
    },
    statechoose(stateval) {
      this.stateselectValue = stateval; //获取选项值
      console.log(stateval);
    },
    supplychoose(supplyval) {
      this.supplyselectValue = supplyval; //获取选项值
      console.log(supplyval);
    },
    unitchoose(unitval) {
      this.unitselectValue = unitval; //获取选项值
      console.log(unitval);
    },
    add() {
      this.dialogVisible = true;
    },
    addEnsure() {
      this.pagingtableshow=true
      this.searchtableshow=false
      this.dialogVisible = false;
      let obj = {
        delFlag: 0,
        goods: this.addname,
        goodsClassifyName: this.addtype,
        goodsUnitsName: "string",
        stock: 0,
        supplierName: "string"
      };
      this.postAddData(obj);
    },
    handleEdit(edit) {
      console.log(edit)
      this.dialogVisibleChange = true;
      this.ManagementID=edit.depotGoodsId
    },
    addEnsureChange() {
      this.dialogVisibleChange = false;
      console.log(this.ManagementID);
      let obj = {
        depotGoodsId: this.ManagementID,
        delFlag: 0,
        goods: "string",
        goodsClassifyName: "string",
        goodsUnitsName: "string",
        stock: this.changenum,
        supplierName: "string"
      };
      this.postChangeData(obj);
    },
    addCancelDelete() {
      this.dialogVisibleDelete = false;
    },
    addEnsureDelete() {
      this.dialogVisibleDelete = false;
      let obj = {
        depotGoodsId: this.ManagementID
      };
      this.postDeleteData(obj);
    },
    handleDelete(del) {
      console.log(del.depotGoodsId)
      this.dialogVisibleDelete = true;
      this.ManagementID=del.depotGoodsId
    },
    handleAdd(add) {
      console.log(add.depotGoodsId)
      this.dialogVisibleAdd = true;
      this.ManagementID=add.depotGoodsId
    },
    addEnsureAdd() {
      this.dialogVisibleAdd = false;
      let obj = {
        depotGoodsId: this.ManagementID,
        // goodsName: this.supplynum,
        // goodsClassifyName: this.supplytype,
        // goodsUnitsName: "string",
        stock: this.supplynum
        // supplierNames: "string"
      };
      this.postSupplyData(obj);
    }
  },
  created() {
    // let obj = {
    //   currentPage: 1,
    //   pageSize: 5
    // };
    // this.postPagingData(obj);
    // this.managementpageData=this.getstorePagingData 
    // console.log(this.managementpageData) 
    // this.postAddData();
    // this.postSearchData();
    // this.postDeleteData();
    // this.postChangeData();
    // this.postSupplyData();
    // this.postPagingData();
  },
  computed: {
    ...mapGetters('consumablesManagementStore',[
      'getstorePagingData','getstoreSupplyData','getstoreChangeData','getstoreDeleteData','getstoreSearchData','getstoreAddData','getPageCount'
    ]),
    ...mapState({
      // pageAddData: function(state) {
      //   return state.consumablesManagementStore.postAddsData;
      // },
      // pageSearchData: function(state) {
      //   return state.consumablesManagementStore.postSearchsData;
      // },
      // pageDeleteData: function(state) {
      //   return state.consumablesManagementStore.postDeletesData;
      // },
      // pageChangeData: function(state) {
      //   return state.consumablesManagementStore.postChangesData;
      // },
      // pageSupplyData: function(state) {
      //   return state.consumablesManagementStore.postSupplysData;
      // },
      // pagepagingData: function(state) {
      //   return state.consumablesManagementStore.postPagingsData;
      // }
    }),
    pagingData() {
      var that = this;
      let data = {
        pageSize: 3, //一页展示几条数据
        pagerCount: 5, //超过多少页打点省略
        currentChange(num) {
          that.currentPage = num; //改变当前页
          console.log(num);
          let obj = {
          currentPage: num,
            pageSize: 5
          };
          that.postPagingData(obj);
        },
        // totalPage
        pageCount: this.pageSize //一共有几条数据
      };
      return data;
    },
    pagingDataSearch() {
      var that = this;
      let data = {
        pageSize: 3, //一页展示几条数据
        pagerCount: 5, //超过多少页打点省略
        currentChange(num) {
          that.currentPage = num; //改变当前页
          console.log(num);
          let obj = {
          currentPage: 1,
          pageSize: 5,
          goods: "肉",
          goodsClassifyName: "肉",
          delFlag: 0
          };
          that.postSearchData(obj);
        },
        // totalPage
        pageCount: this.pageSize //一共有几条数据
      };
      return data;
    },
    // 渲染真实数据
    currentData1(){
      return this.getstoreSearchData;
    },
    currentData(){
      return this.getstoreAddData;
    },
    currentData(){
      return this.getstoreChangeData;
    },
    currentData(){
      return this.getstoreDeleteData;
    },
    currentData(){
      // return this.pageTypePagingData
      return this.getstoreSupplyData;
    },
    currentData(){
      // return this.pageTypePagingData
      return this.getstorePagingData;
    },
    pageSize(){
      return this.getPageCount
    }
  }
}
</script>

<style scoped>
  /* .compile { */
  /* width: 800px; */
  /* height: 430px; */
  /* background-color: #f0f0f0; */
  /* position: relative; */
  /* top: -200px; */
  /* z-index: 1; */
  /* left: 360px; */
  /* text-align: center; */
  /* } */
</style>